import React, { FC } from 'react'
import {
  UploadListProps,
  DISPLAY_NAME_UPLOAD_LIST,
  getUploadListClassNames,
} from './config'
import Icon from '../../Icon'
import { UploadFile } from '../../Upload'
import Progress from '../../Progress'

export const UploadList: FC<UploadListProps> = props => {
  const { fileList, onRemove } = props
  const uploadListClasses = getUploadListClassNames(props)

  const getFileStatusIcon = (file: UploadFile) => {
    let iconDom
    switch (file.status) {
      case 'ready':
      case 'uploading':
        iconDom = <Icon icon="spinner" spin theme="primary"></Icon>
        break
      case 'success':
        iconDom = <Icon icon="check-circle" theme="success"></Icon>
        break
      case 'error':
        iconDom = <Icon icon="times-circle" theme="danger"></Icon>
        break
    }
    return iconDom
  }
  return (
    <ul className={uploadListClasses}>
      {fileList.map(file => {
        return (
          <li className="upload-list-item" key={file.uid}>
            <span className={`file-name file-name-${file.status}`}>
              <Icon icon="file-alt" theme="secondary"></Icon>
              {file.name}
            </span>
            <span className="file-status">{getFileStatusIcon(file)}</span>
            <span className="file-actions">
              <Icon
                icon="times"
                onClick={() => {
                  // todo not finish
                  onRemove(file)
                }}></Icon>
            </span>
            {file.status === 'uploading' && (
              <Progress percent={file.percent || 0}></Progress>
            )}
          </li>
        )
      })}
    </ul>
  )
}
UploadList.displayName = DISPLAY_NAME_UPLOAD_LIST

export default UploadList
